<!--
/**
* Author: KSJ
* Date: 2022-07-21 19:35
* Desc: 订单详情
*/
-->
<template>
  <yy-page custom-style="height:100vh;overflow-y:auto" :linear-bg="true">
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
    <yy-navbar :border="false" left-icon-color="#fff" :auto-back="false" @left-click="backClick" :title="pageTitle" title-style="color:#fff"></yy-navbar>
    <!-- #endif-->

    <view v-if="loading" class="detail-page" :style="{ 'padding-bottom': safeBottom + 'rpx' }">
      <view v-if="orderInfo && orderInfo.orderStatus !== '0'">
        <!-- 订单状态 -->
        <order-status :obj="orderStatusObj" :status="orderInfo.orderStatus" :is-pay="!!!title" @refresh="getInfo"></order-status>

        <!-- 观影小食 -->
        <goods-swiper v-if="type === 'film' && !title && orderInfo.orderStatus === '4'" :list="recommendList"></goods-swiper>
      </view>

      <view v-if="orderInfo && orderInfo.orderStatus === '0'">
        <wait-pay ref="waitPayRef" :order-info="orderInfo"></wait-pay>
      </view>
      <view v-else>
        <view class="detail-content mb20">
          <!-- 混合类商品 -->
          <view v-if="type === 'mall' && orderInfo.mallType === '3' && orderInfo.orderStatus === '4'">
            <goods-detail :obj="qcodeDetailObj"></goods-detail>
            <view v-if="orderInfo.filmCouponDetail && orderInfo.filmCouponDetail.length > 0">
              <view class="divider"></view>
              <mall-detail :arr="getGoodsList(orderInfo.filmCouponDetail)" coupon-type="2"></mall-detail
            ></view>
            <view v-if="orderInfo.mallCouponDetail && orderInfo.mallCouponDetail.length > 0">
              <view class="divider"></view>
              <mall-detail :arr="getGoodsList(orderInfo.mallCouponDetail)" coupon-type="3"></mall-detail
            ></view>
            <view v-if="orderInfo.goodCouponDetail && orderInfo.goodCouponDetail.length > 0">
              <view class="divider"></view>
              <mall-detail :arr="getGoodsList(orderInfo.goodCouponDetail)" coupon-type="1"></mall-detail>
            </view>
            <!-- 影城信息 -->
            <shop-detail
              v-if="orderInfo.goodCouponDetail && orderInfo.goodCouponDetail.length > 0"
              :order-type="type"
              :obj="getGoodsList(orderInfo.goodCouponDetail)[topSwiperIndex || 0]"
              ref="status"
            ></shop-detail>
            <!-- 二维码 -->
            <template v-if="orderInfo.goodCouponDetail && orderInfo.goodCouponDetail.length > 0">
              <!-- <qcode-detail
                :obj="qcodeDetailObj"
                :order-status="orderStatus"
                :order-info="orderInfo"
                @select="setTopSwiperIndex"
              ></qcode-detail> -->
              <qcode-detail :order-info="orderInfo" :obj="getGoodsCode(orderInfo.goodCouponDetail)" @select="setTopSwiperIndex" :order-status="orderStatus"></qcode-detail>
            </template>
            <!-- 领券 -->
            <template v-if="showPrize">
              <view class="divider"></view>
              <view class="bc-white pd30">
                <view class="mb20 fs30">消费有福利 </view>
                <view class="flex flex-b mt10" v-for="item in orderInfo.prizeData" :key="item.id">
                  <view class="w400 one-show">{{ item.name }}</view>
                  <view>x {{ item.number }}</view>
                  <view :class="!item.hasGrant ? 'bt-get' : 'bt-noget'" @click="grantMissionActivityPrize(item)">{{ !item.hasGrant ? '领取' : '已领取' }}</view>
                </view>
                <view class="fs22 fc8 tc mt40">{{ 1 === 1 ? '已领取的券，请在【我的】查看' : '消费福利已发放到您的账户，请在【我的】查看' }}</view>
              </view>
            </template>
          </view>
          <view v-else>
            <!-- 商品内容为券 -->
            <mall-shop-detail :obj="mallShopDetailObj" v-if="type === 'mall' && orderInfo.mallType === '1'"></mall-shop-detail>
            <!-- 影票订单或商品内容不为券 展示影城 -->
            <shop-detail
              v-else
              :order-type="type"
              :obj="type === 'mall' && orderInfo.mallType === '2' ? getGoodsList(orderInfo.goodCouponDetail)[topSwiperIndex || 0] : orderInfo"
              ref="status"
            ></shop-detail>
            <!-- 商品明细 -->
            <template v-if="type === 'mall' && orderInfo.mallType === '1' && orderInfo.orderStatus === '4'">
              <view v-if="orderInfo.filmCouponDetail && orderInfo.filmCouponDetail.length > 0">
                <view class="divider"></view>
                <mall-detail :arr="getGoodsList(orderInfo.filmCouponDetail)" coupon-type="2"></mall-detail
              ></view>
              <view v-if="orderInfo.mallCouponDetail && orderInfo.mallCouponDetail.length > 0">
                <view class="divider"></view>
                <mall-detail :arr="getGoodsList(orderInfo.mallCouponDetail)" coupon-type="3"></mall-detail
              ></view>
              <!-- <mall-detail :arr="mallDetailArr" coupon-type="2"></mall-detail> -->
            </template>

            <!-- 二维码 -->
            <template v-if="orderInfo.orderStatus === '4' && !(type === 'mall' && orderInfo.mallType === '1') && orderStatus !== 'film-5'">
              <view class="divider"></view>
              <!-- <qcode-detail
                :obj="getGoodsCode(orderInfo.goodCouponDetail)"
                :order-status="orderStatus"
                :order-info="orderInfo"
                @select="setTopSwiperIndex"
              ></qcode-detail> -->
              <qcode-detail :obj="qcodeDetailObj" :order-status="orderStatus" :order-info="orderInfo" @select="setTopSwiperIndex"></qcode-detail>
            </template>
            <!-- 领券 -->
            <template v-if="showPrize">
              <view class="divider"></view>
              <view class="bc-white pd30">
                <view class="mb20 fs30">消费有福利 </view>
                <view class="flex flex-b mt10" v-for="item in orderInfo.prizeData" :key="item.id">
                  <view class="w400 one-show">{{ item.name }}</view>
                  <view>x {{ item.number }}</view>
                  <view :class="!item.hasGrant ? 'bt-get' : 'bt-noget'" @click="grantMissionActivityPrize(item)">{{ !item.hasGrant ? '领取' : '已领取' }}</view>
                </view>
                <view class="fs22 fc8 tc mt40">{{ 1 === 1 ? '已领取的券，请在【我的】查看' : '消费福利已发放到您的账户，请在【我的】查看' }}</view>
              </view>
            </template>

            <!-- 商品信息 -->
            <template v-if="type === 'mall' && orderInfo.mallType === '2'">
              <view class="divider"></view>
              <goods-detail :obj="qcodeDetailObj"></goods-detail>
            </template>

            <!-- 影院信息 -->
            <template v-if="type === 'film'">
              <view class="divider"></view>
              <movie-detail :obj="movieDetailObj"></movie-detail>

              <!--套券信息 -->
              <order-coupon-detail :obj="couponDetail" :order-status="orderStatus" v-if="orderInfo.reDiscount && orderInfo.reDiscount.reOrderType === '3'"></order-coupon-detail>
            </template>
          </view>
        </view>
        <!-- 订单信息 -->
        <order-detail :obj="orderDetailObj"></order-detail>
        <!-- 按钮 -->
        <view class="btn" v-if="type === 'mall' && !title" @click="toMall(orderInfo.mallType)">{{ orderInfo.mallType === '1' ? '去购票' : '立即查看' }}</view>
      </view>
    </view>

    <coupon-detail v-if="showQrcode" v-model="showQrcode" :obj="couponInfo" :arr="getGoodsCouponList" :qr-url="qrUrl"></coupon-detail>
  </yy-page>
</template>
<script>
  import pageMixins from '@/mixins/pageMixins'
  import OrderDetail from './components/OrderDetail.vue'
  import QcodeDetail from './components/QcodeDetail.vue'
  import MovieDetail from './components/MovieDetail.vue'
  import OrderCouponDetail from './components/OrderCouponDetail.vue'
  import CouponDetail from '@/pagesOrder/components/CouponDetail/index.vue'
  import ShopDetail from './components/ShopDetail.vue'
  import OrderStatus from './components/OrderStatus.vue'
  import GoodsDetail from './components/GoodsDetail.vue'
  import GoodsSwiper from './components/GoodsSwiper.vue'
  import MallShopDetail from './components/MallShopDetail.vue'
  import MallDetail from './components/MallDetail.vue'
  import WaitPay from './components/WaitPay.vue'

  export default {
    mixins: [pageMixins],
    components: {
      OrderDetail,
      QcodeDetail,
      MovieDetail,
      CouponDetail,
      OrderCouponDetail,
      ShopDetail,
      OrderStatus,
      GoodsDetail,
      GoodsSwiper,
      MallShopDetail,
      MallDetail,
      WaitPay
    },
    data() {
      return {
        safeBottom: getApp().globalData.safeBottom || 40,
        type: '',
        orderId: '',
        pageTitle: '订单详情',
        orderInfo: null, // 订单详情
        recommendList: [], // 推荐商品
        title: '', // 标题
        loading: false,
        isToMall: false,
        showQrcode: false,
        couponInfo: {},
        topSwiperIndex: 0
      }
    },
    created() {
      this.fromPath = this.$tools.getCurrentPage().fromPath
    },
    // #ifdef MP-ALIPAY || MP-TOUTIAO
    onUnload() {
      if (!this.isToMall) {
        console.log(this.fromPath, '========')
        if (this.orderStatus === 'mall-0') {
          this.$refs.waitPayRef.onClose()
        } else if (this.fromPath === 'pagesOrder/order/goodsList' || this.fromPath === 'pagesOrder/order/filmList') {
          // this.$tools.navigateTo(-1)
        } else {
          this.$tools.navigateTo('/pages/index/index', {}, 'reLaunch')
        }
      }
    },
    // #endif
    // #ifdef H5
    beforeRouteLeave(to, from, next) {
      const toPath = to.path
      console.log('hch', to, from, next)
      if (['/pagesOrder/sureOrder/index', '/pagesOrder/goodsPay/index'].includes(toPath)) {
        this.$tools.navigateTo('/pages/index/index', {}, 'reLaunch')
      } else {
        next()
      }
    },
    // #endif
    onLoad(options) {
      console.log(options, 'options')
      this.title = options.title
      if (!this.title) {
        this.pageTitle = '支付结果'
      }
      this.type = options.type
      this.orderId = options.orderId
      if (this.type === 'food') {
        uni.setStorageSync('toMallBuy', '1')
        this.$tools.navigateTo('/pages/mall/mall', {}, 'switchTab')
        return
      }
      // if (this.type === 'film') {
      //   this.orderId = options.filmOrderId
      // }
      // if (this.type === 'mall') {
      //   this.orderId = options.mallOrderId
      // }
      this.init()
    },
    methods: {
      init() {
        this.getInfo()
      },
      // 处理后退
      backClick() {
        const fromPath = this.$tools.getCurrentPage().fromPath
        console.log(fromPath, '========')
        if (this.orderStatus === 'mall-0') {
          this.$refs.waitPayRef.onClose()
        } else if (fromPath === 'pagesOrder/order/goodsList' || fromPath === 'pagesOrder/order/filmList') {
          this.$tools.navigateTo(-1)
        } else {
          this.$tools.navigateTo('/pages/index/index', {}, 'reLaunch')
        }
      },
      // 获取详情
      getInfo() {
        const apis = this.type === 'film' ? uni.$api.orderFilm.getOrderInfo : uni.$api.mall.getOrderInfo

        this.$msg.loading()
        apis({ orderId: this.orderId }).then(async (res) => {
          const data = res
          this.orderInfo = data
          // this.orderInfo.prizeData = [
          //   { name: '123', couponId: '123', number: 1, hasGrant: false },
          //   { name: '222', couponId: '222', number: 2, hasGrant: false }
          // ]
          console.log(this.orderInfo, '====')
          if (this.type === 'film') {
            this.getRecommendList(this.orderInfo.cinemaInfo.cinemaId)
          }
          this.$msg.hideLoading()
          this.loading = true
        })
      },
      // 影票订单获取推荐商品
      getRecommendList(cinemaId) {
        this.$msg.loading()
        uni.$api.mall.getRecommendList({ cinemaId }).then((res) => {
          this.recommendList = res.list
          this.$msg.hideLoading()
        })
      },
      toMain() {
        this.$tools.navigateTo('/pages/ticket/ticket', {}, 'switchTab')
      },
      toMall(type) {
        if (+type === 1) {
          this.isToMall = true
          this.$tools.navigateTo('/pages/ticket/ticket', {}, 'switchTab')
        } else {
          this.$tools.navigateTo('/pagesOrder/merchantsCoupon/index')
        }
      },
      grantMissionActivityPrize(item) {
        uni.$api.activity.grantMissionActivityPrize({ id: item.id }).then(() => {
          this.$msg.toast('领取成功')
          item.hasGrant = true
        })
        //领券
      },
      getGoodsList(detail) {
        if (detail && detail.length > 0) {
          let arr = detail.map((item) => {
            // item.goodsList.forEach((i) => {
            //   i.businessDetail = item.businessDetail
            // })
            return item.goodsList
          })
          arr = arr.flat(Infinity)
          return arr
        } else {
          return []
        }
      },
      getGoodsCode() {
        return {
          type: 'mall',
          // attribute: this.orderInfo.attribute,
          package: this.orderInfo.package,
          name: this.orderInfo.name,
          number: this.orderInfo.number,
          sellPrice: this.orderInfo.sellPrice,
          imageUrl: this.orderInfo.imageUrl,
          goodsList: this.getGoodsList(this.orderInfo.goodCouponDetail)
          // urlList: this.orderInfo.urlList
        }
      },
      openQrcode(item) {
        if (item.isVerification === '0') {
          console.log('openQrcode', item)
          this.couponInfo = item
          this.showQrcode = true
        }
      },
      setTopSwiperIndex(item) {
        this.topSwiperIndex = item
      }
    },
    //  影片订单 showStatus: 0 => '待支付',( 1 => '待出票', 2 => '未放映', 3 => '已放映', 4 => '购票失败', 5 => '已退票',， 6=>'已取消')
    // 商品订单 orderStatus 0 未支付   （1 已支付 2 放弃订单 3 超时取消）      4 订单成功      （refundStatus 1 refundMoneyStatus 1） 已退款
    computed: {
      // 处理后的订单状态
      orderStatus() {
        if (this.orderInfo) {
          return this.type === 'film' ? `film-${this.orderInfo.showStatus}` : `mall-${this.orderInfo.orderStatus}`
        } else {
          return ''
        }
      },
      // orderStatusName() {
      //   return (this.$refs.status && this.$refs.status.orderStatusName) || '--'
      // },
      // 头部订单状态信息
      orderStatusObj() {
        if (this.orderInfo) {
          return this.type === 'film'
            ? {
                orderStatus: this.orderStatus,
                sDate: this.orderInfo.sDate,
                sTime: this.orderInfo.sTime
              }
            : {
                orderStatus: this.orderStatus,
                refundStatus: this.orderInfo.refundStatus,
                refundMoneyStatus: this.orderInfo.refundMoneyStatus
              }
        } else {
          return {}
        }
      },
      // 影片商品支付
      mallShopDetailObj() {
        if (this.orderInfo) {
          return {
            imageUrl: this.orderInfo.imageUrl,
            name: this.orderInfo.name,
            asPrice: this.orderInfo.asPrice,
            number: this.orderInfo.number
          }
        } else {
          return {}
        }
      },
      // 影片商品商品明细
      mallDetailArr() {
        if (this.orderInfo) {
          if (this.orderInfo.detail && this.orderInfo.detail.length > 0) {
            let arr = this.orderInfo.detail.map((item) => item.goodsList)
            arr = arr.flat(Infinity)
            return arr
          } else {
            return []
          }
        } else {
          return []
        }
      },

      // 二维码信息/商品信息
      qcodeDetailObj() {
        if (this.orderInfo) {
          console.log(this.orderInfo, 'this.orderInfo')
          return this.type === 'film'
            ? {
                type: 'film',
                ticketNum: this.orderInfo.ticketNum,
                qrCode: this.orderInfo.qrCode,
                ticketInfo: this.orderInfo.ticketInfo
                // urlList: this.orderInfo.urlList
              }
            : {
                type: 'mall',
                // attribute: this.orderInfo.attribute,
                package: this.orderInfo.package,
                name: this.orderInfo.name,
                number: this.orderInfo.number,
                sellPrice: this.orderInfo.sellPrice,
                imageUrl: this.orderInfo.imageUrl,
                goodsList: this.mallDetailArr
                // urlList: this.orderInfo.urlList
              }
        } else {
          return {}
        }
      },
      // 套券信息
      couponDetail() {
        if (this.orderInfo) {
          return this.orderInfo.reDiscount || {}
        } else {
          return {}
        }
      },
      // 影院信息
      movieDetailObj() {
        if (this.orderInfo) {
          return {
            hallName: this.orderInfo.hallName,
            sDate: this.orderInfo.sDate,
            sTime: this.orderInfo.sTime,
            eTime: this.orderInfo.eTime,
            seatDescribe: this.orderInfo.seatDescribe,
            filmName: this.orderInfo.filmName,
            copyType: this.orderInfo.copyType,
            cover: this.orderInfo.cover,
            refundExplain: this.orderInfo.refundExplain
          }
        } else {
          return {}
        }
      },
      // 订单信息
      orderDetailObj() {
        if (this.orderInfo) {
          return this.type === 'film'
            ? {
                ...this.orderInfo,
                showStatus: this.orderInfo.showStatus,
                orderStatus: this.orderInfo.orderStatus,
                orderNo: this.orderInfo.orderNo,
                orderTime: this.orderInfo.orderTime,
                mobile: this.orderInfo.mobile,
                backTicketTime: this.orderInfo.backTicketTime,
                thirdMoney: this.orderInfo.thirdMoney,
                discount: this.orderInfo.couponDiscountPay,
                saleTotalPrice: this.orderInfo.reDiscount.reOrderType === '3' ? this.orderInfo.reDiscount.package.saleTotalPrice : '',
                couponName: this.orderInfo.reDiscount.reOrderType === '3' ? this.orderInfo.reDiscount.package.couponName : ''
              }
            : this.orderInfo
        } else {
          return {}
        }
      },
      //是否展示奖品
      showPrize() {
        if (this.orderInfo) {
          const filmShow = this.orderInfo.orderStatus === '4' && this.type === 'film' && this.orderInfo.prizeData && this.orderInfo.prizeData.length > 0

          const mallShow = this.type === 'mall' && this.orderInfo.orderStatus === '4' && this.orderInfo.prizeData && this.orderInfo.prizeData.length > 0

          return filmShow || mallShow
        } else {
          return false
        }
      },
      getGoodsCouponList() {
        const list = (this.orderInfo && this.orderInfo.goodsCouponList) || []
        const backList = list.filter((item) => item.isVerification === '0')
        return backList
      },
      qrUrl() {
        const arr = []
        this.getGoodsCouponList.forEach((item) => {
          const qrCode = item.interfacePickUpCode || item.code
          arr.push(this.$utils.qrcodeCreate(qrCode))
        })
        console.log('qrUrl', arr)
        return arr
      }
    }
  }
</script>

<style lang="scss">
  // .page {
  //   height: 100vh;
  //   overflow-y: hidden;
  //   background: #f3f5f7;
  //   box-sizing: border-box;
  //   &::before {
  //     content: '';
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     right: 0;
  //     height: 500rpx;
  //     background: linear-gradient(#4bcfdd, rgba($color: #4bcfdd, $alpha: 0.01));
  //   }
  // }
  .detail-page {
    // height: 100vh;
    // overflow-y: auto;
    position: relative;
    padding: 20rpx 20rpx 0;
    box-sizing: border-box;
    .detail-content {
      border-radius: 20rpx;
      overflow: hidden;
    }
    .btn {
      width: 100%;
      height: 100rpx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 20rpx;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
    }
  }
  .divider {
    height: 40rpx;
    margin: -2rpx 0;
    width: 100%;
    // background: #fff;
    background-image: url(https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/divider.png);
    background-repeat: no-repeat;
    background-size: 100% 40rpx;
  }
  .bt-get {
    text-align: center;
    line-height: 40rpx;
    width: 100rpx;
    height: 40rpx;
    color: white;
    font-size: 20rpx;
    background: linear-gradient(135deg, #fea631 0%, #f9a72e 100%);
    border-radius: 16rpx;
  }
  .bt-noget {
    text-align: center;
    line-height: 40rpx;
    width: 100rpx;
    height: 40rpx;
    font-size: 20rpx;
    color: white;
    background: #e0e0e0;
    border-radius: 16px;
  }
</style>
